<!-- eslint-disable vue/valid-v-bind -->
<template>
  <div class="specification mt-2 bg-light-100">
    <van-cell is-link :title="specificationList?.name" @click="show = true" value="请选择" />
    <van-action-sheet v-model="show">
      <div class="content">
        <div class="content-detail">
          <van-image @click="imagePreview" width="2rem" height="2rem" fit="fill" :src="productList[0]?.url" />
          <div class="price">
            <p>￥{{ Number($store.state.Classification.detailData.info?.retailPrice).toFixed(2) }}</p>
            <p>{{ goods[Number(isActive)] }}</p>
          </div>
          <p class="spec">规格</p>
          <p v-for="item in productList" :key="item.id">
            <span v-for="(itemInner,index) in item.specifications" :key="index"  :class="isActive? 'active': '' "  style="padding: 5px 10px;font-size: 12px;background-color: #ccc;"
          @click="isChoose">{{ itemInner }}</span>
          </p>
          <p class="spec-num">
            <span class="spec-content">购买数量</span>
            <van-stepper class="spec-col inline-block" v-model="number" />
          </p>
        </div>
        <van-goods-action>
          <van-goods-action-button type="warning" @click="addShopping" text="加入购物车" />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import { addShopAjax } from '@/api/classification.js'
export default {
  name: 'Specification',
  props: ['isShow'],
  components: {
  },
  data () {
    return {
      show: false,
      number: 1,
      isActive: true,
      goods: ['请选择商品规格', '已选 标准']
    }
  },
  computed: {
    specificationList () {
      return this.$store.state.Classification.detailData.specificationList[0]
    },
    specificationPicUrl () {
      const id = this.$store.state.Classification.detailData.specificationList[0]?.valueList[0].goodsId
      const newList = this.$store.state.Classification.list.filter(item => item.id === id)
      return newList[0]?.picUrl
    },
    productList () {
      return this.$store.state.Classification.detailData.productList
    }
  },
  watch: {
    isShow () {
      this.show = this.isShow
    },
    // 判断当规格页面不展示时，其父组件中的attrIsTrue属性变为false
    show: {
      handler (newValue) {
        if (newValue === false) {
          this.$parent.attrIsTrue = newValue
        }
      }
    }
  },
  mounted () {
    console.log(this.$parent.attrIsTrue)
    console.log(this)
  },
  methods: {
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      // Toast(item.name)
    },
    imagePreview () {
      // eslint-disable-next-line no-undef
      ImagePreview([this.productList[0]?.url])
    },
    isChoose () {
      this.isActive = !this.isActive
    },
    // 加入购物车
    addShopping () {
      const obj = {
        goodsId: this.productList[0].goodsId,
        number: this.number,
        productId: this.productList[0].id
      }
      if (window.localStorage.getItem('token')) {
        addShopAjax({ ...obj }).then(res => {
          console.log(res)
          if (res.errno === 501) {
            window.localStorage.removeItem('token')
            this.addShopping()
          } else {
            this.$toast.success('已添加购物车')
          }
          this.show = false
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.$router.push({ name: 'Login' })
      }
    }
  }
}

</script>
<style scoped lang='scss'>
.content {
  padding: 20px 20px 100px;
}
.content-detail{
  .price{
    display: inline-block;
    margin-left: 30px;
    line-height: 1rem;
    font-size: 20px;
    color: red;
    p:nth-child(2) {
      font-size: 16px;
      color: rgb(97, 95, 95);
    }
  }
}
.spec{
  margin-top: 20px;
  font-size: 16px;
}
.spec-num{
  margin-top: 20px;
  font-size: 16px;
}
::v-deep .van-stepper{
  line-height: 18px;
  text-align: right;
  color: red;
  position: absolute;
  right: 20px;
}
.active{
  color:red;
  background-color:rgb(238, 202, 202);
}
</style>
